<template>
  <article>
    <!-- 加多一层section，解决边框溢出与底座冲突 -->
    <section
      class="chart_container"
      :style="{width: containerWidth, height: containerWidth}"
    >
      <!-- 图表 -->
      <div :id="id" class="chart" :style="{width: outerWidth, height: outerWidth }" />
    </section>

    <!-- 底座 -->
    <div class="remark" :style="{width: outerWidth}">
      <div class="pedestal">
        <div
          class="top"
          :style="{
            width: outerWidth,
            background: pedestalColor,
          }"
        >
          <p
            :style="{
              width: outerWidth,
              background: pedestalColor,
              'box-shadow': pedestalBoxShadow
            }"
          />
        </div>
        <div
          class="front"
          :style="{
            width: outerWidth,
            background: pedestalColor
          }"
        />
      </div>
      {{ data.remark || '标准' }}
    </div>
  </article>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    id: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      required: true
    },
    other: {
      type: Object,
      default: null
    },
    style: {
      type: Object,
      default: null
    }
  },
  computed: {
    containerWidth () {
      if (this.style && this.style.outerRadius) {
        return this.style.outerRadius * 2 - 4 + 'px'
      }
      return '100px'
    },
    outerWidth () {
      if (this.style && this.style.outerRadius) {
        return this.style.outerRadius * 2 + 'px'
      }
      return '100px'
    },

    pedestalColor () {
      if (this.style && this.style.spaceColor) {
        return `linear-gradient(
            to top,
            ${this.style.spaceColor} 30%,
            ${this.style.cilcleColor} 100%)`
      }
      return 'linear-gradient(to top, rgba(0, 0, 0, 0) 50%, rgba(11, 216, 232, 0.4) 100%)'
    },
    pedestalBoxShadow () {
      const shadow = `inset 0 10px 4px -6px ${this.style.borderColor}`
      return shadow
    }
  },
  mounted () {
    const myChart = this.initEchart()
    const option = this.deployOption()
    option && myChart.setOption(option)
  },
  methods: {
    // 配置圆环的分段数
    subSum () {
      const data = []
      for (let i = 1; i <= this.data.subSum; i++) {
        if (i % 2 === 0) {
          data.push({ value: 100, name: '2' })
        } else {
          data.push({ value: 100, name: '1' })
        }
      }
      return data.length > 0 ? data : [{ value: 100, name: '1' }, { value: 100, name: '2' }]

    },
    // 请求圆心图片
    // 设想如果用户不传图片、传错图片的情况，如何处理
    requireImgUrl (url) {
      if (!url) return ''
      let img
      try {
        // 这一步要对用户传值的处理，避免出现相对路径问题
        img = require('@/' + url.replace(/@\//, ''))
      } catch (err) {
        // 如果图片读取错误，使用错误图片
        // 支持传值，如果不传应使用线上图片代替
        img = require('@/assets/error.png')
      }
      return img
    },
    // 配置圆心图片、文案
    deployGraphic () {
      if (!this.style) return ''
      return [
        {
          type: 'group',
          left: 'center',
          top: 'center',
          children: [
            {
              type: 'circle',
              // 不设置宽高定位失效
              left: 'center',
              top: 'center',
              shape: {
                cx: 0,
                cy: 0,
                r: this.style.innerRadius - 2 || 43
              },
              style: {
                fill: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0, color: this.style.spaceColor // 0% 处的颜色
                    },
                    {
                      offset: 0.4, color: 'rgba(0, 0, 0, 0)' // 0% 处的颜色
                    },
                    {
                      offset: 1, color: this.style.cilcleColor // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            {
              type: 'text',
              left: 'center',
              top: '-16',
              style: {
                text: this.data.value,
                fill: '#fff',
                font: '22px sans-serif'
              }
            },
            {
              type: 'text',
              left: 'center',
              top: '10',
              style: {
                text: this.data.unit,
                fill: '#ccc',
                font: '12px sans-serif'
              }
            }
          ]
        }
      ]
    },
    // 初始化图表对象
    initEchart () {
      var chartDom = document.getElementById(this.id)
      var myChart = echarts.init(chartDom)
      return myChart
    },
    // 配置option
    deployOption () {
      const option = {
        tooltip: {
        // 鼠标悬停tip框
          trigger: ''
        },
        // 图表上方文本
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },

        // 圆心配置
        graphic: this.deployGraphic(),
        color: [this.style.borderColor, '#d0d1d2'],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            // 环形厚度，不允许百分比传值，方便使用
            radius: [this.style.innerRadius || 45, this.style.outerRadius || 50],
            avoidLabelOverlap: false,
            // 取消鼠标悬停放大
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            // 单个圆弧边框样式
            itemStyle: {
              borderColor: this.style.spaceColor,
              borderWidth: 2
              // borderCap: 'square'
            },
            // 鼠标悬停圆心内容
            emphasis: {
              label: {
                show: false
              }
            },
            data: this.subSum()
          }
        ]
      }
      return option
    }
  }
}
</script>

<style lang="scss" scoped>
.chart_container{
  position: relative;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 50%;
  width: 100px;
  height: 100px;
}
.chart{
  width: 104px;
  height: 104px;
}
.remark{
  width: 100px;
  height: 100px;
  margin-top: 10px;
  color: #999;
  font-size: 14px;
  perspective: 400px;
  transform: translateY(-2px);
  .pedestal{
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-20deg);
  }
  .top{
    position: absolute;
    width: 100px;
    height: 140px;
    transform-origin: top;
    transform: rotateX(-90deg);
    p{
      margin: 0;
      width: 100%;
      height: 100%;
      border-radius: 6px;
      box-shadow: inset 0 10px 4px -6px rgba(11, 216, 232, 0.8);
      background: linear-gradient(to top,#161a1f 20%, rgba(11, 216, 232, 0.1) 70%, rgba(11, 216, 232, 0.2) 100%);
    }
  }
  .front{
    width: 100px;
    height: 30px;
    background: linear-gradient(to top,rgba(0,0,0,0) 40%, rgba(11, 216, 232, 0.1) 70%, rgba(11, 216, 232, 0.4) 100%);
  }
}
</Style>
